<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/static/mobile/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/static/mobile/css/common.css">
    <link rel="stylesheet" type="text/css" href="/static/mobile/css/iconfont.css">
    <title>榜单详情</title>
    <style>
        .list {
            width: 100%;
            height: 15rem;
            background: url(/static/mobile/images/ranking/bg@3x.png) no-repeat;
            background-size: 100% 100%;
        }

        .list .header {
            position: relative;
            height: 4.15rem;
        }

        .list .header .title {
            position: absolute;
            top: 0.3rem;
            left: 50%;
            margin-left: -0.85rem;
            width: 1.7rem;
            height: 0.93rem;
            background: url(/static/mobile/images/ranking/font@3x.png) no-repeat;
            background-size: 100% 100%;
        }

        .list .header .iconfont {
            position: fixed;
            top: 0.4rem;
            left: 0.1rem;
            color: #CCC;
            font-size: 0.2rem;
            padding: 0 0.16rem;
        }

        .list .header .banner {
            position: absolute;
            top: 0.98rem;
            left: 50%;
            margin-left: -1.6rem;
            width: 3.2rem;
            height: 3.06rem;
            background: url(/static/mobile/images/ranking/chahua@3x.png) no-repeat;
            background-size: 100% 100%;
        }

        .list .header .name {
            position: absolute;
            top: 3.45rem;
            left: 40%;
            margin-left: -1.1rem;
            width: 2.2rem;
            height: 1.09rem;
            background: url(/static/mobile/images/ranking/bangshangyouming@3x.png) no-repeat;
            background-size: 100% 100%;
        }

        .list .name2 {
            position: absolute;
            top: 0.2rem;
            left: 40%;
            margin-left: -1.1rem;
            width: 2.2rem;
            height: 1.09rem;
            background: url(/static/mobile/images/ranking/bangdanguize@3x.png) no-repeat;
            background-size: 100% 100%;
        }

        .list .section {
            margin: 10px;
            margin-bottom: 0;
            height: 5.36rem;
            border-radius: 0.15rem;
            text-align: center;
        }

        .list .apprentice_list,
        .list .grandson_list {
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .list .headtitle {
            position: relative;
        }

        .list .task_title,
        .list .invite_title {
            padding: 0.14rem 0;
            background-image: linear-gradient(0deg, #fe8130 0%, #ffa424 62%, #ffcb14 100%);
            background-image: -webkit-linear-gradient(0deg, #fe8130 0%, #ffa424 62%, #ffcb14 100%);
            background-image: -o-linear-gradient(0deg, #fe8130 0%, #ffa424 62%, #ffcb14 100%);
            background-image: -moz-linear-gradient(0deg, #fe8130 0%, #ffa424 62%, #ffcb14 100%);
            border-radius: 20px 20px 0px 0px;
            font-size: 0.16rem;
            font-family: "SourceHanSansCN-Bold";
            font-weight: bold;
            font-stretch: normal;
            color: #FFF;
        }

        .list .headtitle .cur {
            background: #FFF;
            color: #241ca0;
        }

        .list .bar1 {
            position: absolute;
            bottom: 0;
            left: 22%;
            width: 0.22rem;
            height: 0.04rem;
            background-color: #b6b2ff;
            box-shadow: 0px 4px 20px 0px #c0beec;
            border-radius: 4px;
        }

        .list .bar2 {
            position: absolute;
            bottom: 0;
            left: 72%;
            width: 0.22rem;
            height: 0.04rem;
            background-color: #b6b2ff;
            box-shadow: 0px 4px 20px 0px #c0beec;
            border-radius: 4px;
        }

        .list .content {
            background: #FFF;
            height: 4.68rem;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            padding-top: 0.22rem;
        }

        .list .task,
        .list .invite {
            height: 100%;
        }

        .list .table_head {
            width: 94%;
            padding: 0.09rem 0;
            background-image: linear-gradient(0deg, #4514e5 0%, #664fff 36%, #c62ee5 100%);
            background-image: -webkit-linear-gradient(0deg, #4514e5 0%, #664fff 36%, #c62ee5 100%);
            background-image: -o-linear-gradient(0deg, #4514e5 0%, #664fff 36%, #c62ee5 100%);
            background-image: -moz-linear-gradient(0deg, #4514e5 0%, #664fff 36%, #c62ee5 100%);
            box-shadow: 0px 4px 20px 0px rgba(79, 49, 243, 0.4);
            border-radius: 30px;
            margin: 0 auto;
            font-family: "SourceHanSansCN-Bold";
            font-size: 0.13rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0px;
            text-align: center;
            color: #ffffff;
        }

        .list .nickname {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .champion img,
        .second img,
        .third img {
            width: 0.34rem;
            height: 0.34rem;
        }

        .list .task li,
        .list .invite li {
            width: 94%;
            height: 0.41rem;
            margin: 0 auto;
            border-bottom: 2px solid #F4F4F4;
            color: #909090;
        }

        .list .task li:last-child,
        .list .invite li:last-child {
            border-bottom: 0;
        }

        .list li div {
            width: 25%;
            text-align: center;
        }

        .list li .sort {
            width: 20%;
        }

        .list li .nickname {
            width: 30%;
        }

        .list .List_rule {
            position: relative;
            width: 100%;
        }

        .list .text {
            padding-top: 1rem;
            text-align: left;
        }

        .list .text .title {
            height: 0.3rem;
            line-height: 0.3rem;
            padding-left: 0.15rem;
            font-family: SourceHanSansCN-Heavy;
            font-size: 0.14rem;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            margin-bottom: 0.05rem;
        }

        .list .text .title::after {
            display: block;
            content: "";
            width: 40px;
            height: 4px;
            background-color: #17e5c0;
            border-radius: 2px;
        }

        .list .text .detail {
            color: #FFF;
            font-family: SourceHanSansCN-Regular;
            font-size: 0.13rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            padding-left: 0.15rem;
            margin-bottom: 0.2rem;
        }
       .text_hightlight {
          font-size: 0.16rem;
          font-family: "思源黑体";
          font-weight: bold;
          color: #FE8230;
       }
    </style>
</head>

<body>
    <div class="warpper list" id="list-page">
        <header class="header">
            <div class="title"></div>
            <div class="banner"></div>
            <div class="name"></div>
            <i class="iconfont" tapmode onclick="toback()">&#xe65b;</i>
        </header>
        <section class="section">
            <div class="card">
                <div class="headtitle flex_oldbox flex_dn flex_oh">
                    <div class="task_title flex_item cur" id="task_title" onclick="changeState(1);">任务榜单</div>
                    <div class="invite_title flex_item" id="invite_title" onclick="changeState(2);">邀请榜单</div>
                    <div class="bar1" id="head_bar"></div>
                </div>
                <div class="content" id="content">
                    <div class="table_head flex_oldbox flex_dn flex_oh" id="table_head">
                        <div class="flex_item" style="width: 20%;">排名</div>
                        <div class="flex_item" style="width: 30%">昵称</div>
                        <div class="flex_item" style="width: 25%;" id="task_income">任务收入</div>
                        <div class="flex_item" style="width: 25%; display:none;" id="recommend_income">推荐收入</div>
                        <div class="flex_item" style="width: 25%;">额外奖励</div>
                    </div>
                    <div class="task" id="task">
                        <ul class="task_list" id="task_list">

                        </ul>
                    </div>
                    <div class="invite" id="invite" >
                        <ul class="invit e_list" id="invite_list">
                            
                        </ul>
                    </div>
                </div>
            </div>
            <div class="List_rule">
                <div class="name2"></div>
                <div class="text">
                    <div class="list_time">
                        <div class="title">榜单时间</div>
                        <div class="detail">2018年12月10日~2019年1月9日</div>
                    </div>
                    <div class="rule">
                        <div class="title">任务榜单排名规则</div>
                        <div class="detail">在活动时间内，做任务赚钱最多的前10位用户可依次获得相应奖励，仅计算成功做任务获得的收入作为排名依据；</div>
                    </div>
                    <div class="rule">
                        <div class="title">邀请榜单排名规则</div>
                        <div class="detail">在活动时间内，好友任务提成总和最多的前10位用户可依次获得相应奖励，仅计算活动时间内新增的一级好友；</div>
                    </div>
                    <div class="award">
                        <div class="title">奖励发放</div>
                        <div class="detail" style="margin-bottom:0;">榜单实时更新，以12月9日23:59:59的最终排名为准，奖励将在次日18:00前发放到账户余额内，届时可自行提现；</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="/static/mobile/js/adaptive.js"></script>
<script type="text/javascript" src="/static/mobile/js/tools.js"></script>
<script type="text/javascript" src="/static/mobile/js/utils.js"></script>
<script type="text/javascript" src="/static/mobile/js/config.js"></script>
<script type="text/javascript" src="http://www.wbwan.vip/wap_stitic/js/zepto.min.js"></script>
<script type="text/javascript">
    var flag = "current";
    var mount = 1;
    var total = 10;
    var taskIncomeMap =  [98,68,38,28,18,8,8,8,8,8];
    var inviteUserMap =  [300,200,100,88,58,38,28,18,8,8];
    // apiready = function() {
    //     $api.fixStatusBar($api.dom('.header'));
    //     initPage();
    // }
    $(function() {
        initPage();
    })

    function initPage() {
        getPost(0);
    }

    function changeState(pageId) {
        var id = pageId;
        $('#task_title').removeClass('cur');
        $('#invite_title').removeClass('cur');
        $('#head_bar').removeClass('bar1');
        $('#head_bar').removeClass('bar2');
        if (pageId == 1) {
            $('#task_title').addClass('cur');
            $('#head_bar').addClass('bar1');
            $('#recommend_income').hide();
            $('#task_income').show();
            getPost(id);
        } else if (pageId == 2) {
            $('#invite_title').addClass('cur');
            $('#head_bar').addClass('bar2');
            $('#task_income').hide();
            $('#recommend_income').show();
            getUser(id);
        }
    }
    function getTask() {
        postAjax("/api/statistic/task",{flag:flag},function(res){
             if (res.code && res.code == 200) {
              var str = '';
              for (var key in res.data) {
                  str += makeDomTask(makeData(res.data[key]));
                  mount++;
              }
              mount = 1;
              $('#task_list').html(str);
              $('#invite').hide();
              $('#task').show();
          }
        })
    }
    function getUser() {
        postAjax("/api/statistic/user",{flag:flag},function(res){
             var str = '';
             var nodata = total - res.data.length;
             var item = res.data.length - 1;
             var extra_sort = res.data.length + 1;
             for (var key in res.data) {
                 str += makeDomUser(makeData(res.data[key]));
                 mount++;
             }
             while(nodata) {
                str += makeDomNoData( extra_sort , inviteUserMap[item]);
                nodata--;
                item++;
                extra_sort++;
             }
             mount = 1;
             $('#invite_list').html(str);
             $('#task').hide();
             $('#invite').show();
        })
    }
    function getPost(refresh) {
        if(refresh == 0) {
            getTask();
        }
        if (refresh == 1) {
            getTask();
         } else if (refresh == 2) {
            getUser();
        }
    }
    function makeData(obj) {
        return obj;
    }
    function makeDomTask(obj) {
        switch (mount) {
            case 1:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort champion"><img src="/static/mobile/images/ranking/1@3x.png" alt="冠军"></div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
            case 2:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort second"><img src="/static/mobile/images/ranking/2@3x.png" alt="亚军"></div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
            case 3:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort third"><img src="/static/mobile/images/ranking/3@3x.png" alt="季军"></div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
            default:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort">' + mount + '</div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
        }
        return str;
    }
    function makeDomUser(obj) {
        switch (mount) {
            case 1:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort champion"><img src="/static/mobile/images/ranking/1@3x.png" alt="冠军"></div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
            case 2:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort second"><img src="/static/mobile/images/ranking/2@3x.png" alt="亚军"></div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
            case 3:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort third"><img src="/static/mobile/images/ranking/3@3x.png" alt="季军"></div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
            default:
                var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                    ' <div class="sort">' + mount + '</div>',
                    ' <div class="nickname">' + obj.nickname + '</div>',
                    ' <div class="accumulate_income">' + obj.amount_count + '</div>',
                    ' <div class="additional_rewards text_hightlight">'+ obj.extra_reward +'元</div>',
                    '</li>'
                ].join("");
                break;
        }
        return str;
    }
    function makeDomNoData(sort,mount) {
            var str = [' <li class="flex_oldbox flex_dn flex_oh flex_hv_center">',
                ' <div class="sort">'+ sort +'</div>',
                ' <div class="nickname">-</div>',
                ' <div class="accumulate_income">-</div>',
                ' <div class="additional_rewards text_hightlight">' + mount +'元</div>',
                '</li>'
            ].join("");
         return str;
    }
    function toback() {
        // api.closeWin();
    }
// 封装zetpo的ajax请求;
 

  

</script>

</html>
